<template>
	<div class="library_member" v-loading="loading">
		<el-tabs class="custom_top" type="card" v-model="checkedRole" addable @tab-add="handleAddLibraryRole">
			<el-tab-pane v-for="(item, index) in libraryRoles" :key="index" :label="item.name" :name="item.id">
				<template slot="label">
					{{ item.name }}
					<el-dropdown size="small" @command="handleCommand">
						<i class="iconfont icon-sw-more-vertical"></i>
						<el-dropdown-menu slot="dropdown">
							<template v-if="item.level === '1'">
								<el-dropdown-item :command="{ type: 'look', id: item.id }" icon="el-icon-view">查看权限</el-dropdown-item>
							</template>
							<template v-else>
								<el-dropdown-item :command="{ type: 'edit', id: item.id }" icon="el-icon-edit">编辑角色</el-dropdown-item>
								<el-dropdown-item :command="{ type: 'delete', data: item }" icon="el-icon-delete">删除角色</el-dropdown-item>
							</template>
						</el-dropdown-menu>
					</el-dropdown>
				</template>
			</el-tab-pane>
		</el-tabs>
		<member-list :role-id="checkedRole" :data="roleMemberData" :role-list="moveRoleOptions"></member-list>
		<role-form v-model="roleDialog" :data="libRoleData" @refresh="getLibraryRoleData"></role-form>
	</div>
</template>

<script>
import roleForm from './form';
import memberList from './list';
import { getLibMemberList } from '@/api/data/tbNetPower';
import { getLibraryRoleList, deleteLibraryRole } from '@/api/data/tbNetRole';
export default {
	components: { roleForm, memberList },
	inject: ['getLibId'],
	props: {
		data: {
			type: Object,
			default() {
				return {};
			}
		}
	},
	provide() {
		return {
			refreshMember: () => this.getLibraryMemberData()
		};
	},
	data() {
		return {
			isFirst: true,
			loading: false,
			checkedRole: '',
			libraryRoles: [],
			roleDialog: false,
			libRoleData: {},
			memberDataList: []
		};
	},
	computed: {
		libId() {
			return this.getLibId();
		},
		roleMemberData() {
			return this.memberDataList.filter((item) => item.roleId === this.checkedRole);
		},
		moveRoleOptions() {
			return this.libraryRoles.filter((item) => item.id !== this.checkedRole);
		}
	},
	watch: {
		roleMemberData(arr) {
			console.log(arr);
		}
	},
	mounted() {
		this.initMemberData();
	},
	methods: {
		//初始化库成员数据
		async initMemberData() {
			this.loading = true;
			await this.getLibraryRoleData();
			await this.getLibraryMemberData();
			this.checkedRole = this.libraryRoles[0].id;
			this.loading = false;
		},

		//获取库角色数据
		async getLibraryRoleData() {
			let result = await getLibraryRoleList({ dirId: this.data.id }).then((res) => res.data);
			this.boxLoading = false;
			if (result.code === '0') {
				let datas = !result.data ? [] : result.data;
				this.libraryRoles = datas.sort((a, b) => Number(a.level) - Number(b.level));
			}
		},

		//获取资源库成员
		async getLibraryMemberData() {
			let params = { page: 1, limit: 9999, dirId: this.libId };
			let result = await getLibMemberList(params).then((res) => res.data);
			if (result.code === '0') {
				this.memberDataList = !result.data ? [] : result.data;
			}
		},

		//下拉指令操作
		handleCommand(command) {
			if (command.type === 'delete') {
				let that = this;
				this.$confirm(`此操作将删除库角色<font color="#f00">【${command.data.name}】</font>, 是否继续?`, '删除提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
					dangerouslyUseHTMLString: true,
					async beforeClose(action, instance, done) {
						if (action === 'confirm') {
							instance.confirmButtonLoading = true;
							await this.deleteLibraryRoleRequest(command.data.id);
							instance.confirmButtonLoading = false;
						} else {
							done();
						}
					}
				}).catch(() => {});
			} else {
				this.roleDialog = true;
				this.libRoleData = { ...command };
			}
		},

		//添加库角色
		handleAddLibraryRole() {
			this.roleDialog = true;
			this.libRoleData = { type: 'add', id: this.data.id };
		},

		//删除库角色请求
		async deleteLibraryRoleRequest(id) {
			let result = await deleteLibraryRole(id).then((res) => res.data);
			if (result.code === '0') {
				this.$message.success('删除库角色成功');
			} else {
				this.$message.error('删除库角色失败');
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.library_member ::v-deep {
	display: flex;
	flex-direction: column;
	flex: 1;
	overflow: hidden;
	.el-tabs__nav-wrap {
		padding: 0 48px 0 10px;
	}
	.el-tabs__new-tab {
		margin: 10px;
	}
	.el-dropdown {
		margin: 0 -8px 0 5px;
		line-height: 1;
	}
}
</style>
